﻿@inherits LayoutComponentBase

<style>
    .gradient {
        background: linear-gradient(90deg, #108c8f 0%, #68bbbd 100%);
    }
</style>

<!--Nav-->
<nav id="header" class="fixed w-full z-30 top-0 text-white bg-white">
    <div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 py-2">
        <div class="pl-4 flex items-center">
            <a class="toggleColour no-underline hover:no-underline font-bold text-2xl lg:text-4xl text-gray-800" href="/">
                <img src="img/ZBD.png" alt="logo" width="32" height="32" class="h-8 inline" />
                BLAZOR DIAGRAMS
            </a>
        </div>
        <div class="block lg:hidden pr-4">
            <button id="nav-toggle" class="flex items-center p-1 text-pink-800 hover:text-gray-900 focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out">
                <svg class="fill-current h-6 w-6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <title>Menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </div>
        <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden mt-2 lg:mt-0 lg:bg-transparent text-black p-4 lg:p-0 z-20 bg-white" id="nav-content">
            <ul class="list-reset lg:flex justify-end flex-1 items-center">
                <li class="mr-3">
                    <a class="font-bold inline-block py-2 px-4 no-underline hover:text-gray-800 hover:text-underline hover:text-palette-main" href="/documentation">
                        Documentation
                    </a>
                </li>
                <li class="mr-3">
                    <a class="font-bold inline-block text-black no-underline hover:text-gray-800 hover:text-underline py-2 px-4 hover:text-palette-main" href="#">
                        Examples
                    </a>
                </li>
                <li class="mr-3">
                    <a class="font-bold inline-block text-black no-underline hover:text-gray-800 hover:text-underline py-2 px-4 hover:text-palette-main"
                       href="https://github.com/Blazor-Diagrams/Blazor.Diagrams"
                       target="_blank">
                        GitHub
                    </a>
                </li>
            </ul>
            <a href="/documentation/installation" class="mx-auto lg:mx-0 hover:no-underline font-bold rounded-full mt-4 lg:mt-0 py-4 px-8 shadow opacity-75 focus:outline-none focus:shadow-outline transform transition hover:scale-105 duration-300 ease-in-out gradient text-white">
                Get started
            </a>
        </div>
    </div>
</nav>

@Body